JavaScript Decorators: Metaprogrammering och AOP-mönster

JavaScript-decorators är en kraftfull och uttrycksfull metaprogrammeringsfunktion som låter dig modifiera eller förbättra beteendet hos klasser, metoder, egenskaper och parametrar på ett deklarativt och återanvändbart sätt. De tillhandahåller en koncis syntax för att lägga till metadata och implementera principer för Aspect-Oriented Programming (AOP), vilket förbättrar kodens återanvändbarhet, läsbarhet och underhållbarhet. Denna omfattande guide kommer att utforska JavaScript-decorators i detalj och täcka deras syntax, användning och tillämpningar i olika scenarier. Även om decorators officiellt fortfarande är ett förslag som utvecklas, är de allmänt adopterade, särskilt i ramverk som Angular och NestJS, och deras inverkan på JavaScript-utveckling är obestridlig.

Vad är JavaScript Decorators?

Decorators är en speciell typ av deklaration som kan kopplas till en klassdeklaration, metod, accessor, egenskap eller parameter. De använder formen @expression, där expression måste utvärderas till en funktion som kommer att anropas vid körning med information om den dekorerade deklarationen. I grund och botten fungerar decorators som funktioner som omsluter eller modifierar det dekorerade elementet, vilket gör att du kan lägga till extra funktionalitet eller metadata utan att direkt ändra den ursprungliga koden.

Tänk på decorators som annotationer eller markörer som kan kopplas till kodelement. Dessa markörer kan sedan bearbetas vid körning för att utföra olika uppgifter, som loggning, validering, auktorisering eller beroendeinjektion. Decorators främjar en renare och mer modulär kodstruktur genom att separera bekymmer och minska boilerplate.

Fördelar med att Använda Decorators

• Förbättrad kodåteranvändbarhet: Decorators låter dig kapsla in gemensamt beteende i återanvändbara komponenter som kan tillämpas på flera delar av din applikation. Detta minskar kodduplicering och främjar konsistens.
• Förbättrad läsbarhet: Genom att separera korsande bekymmer i decorators kan du göra din kärnlogik renare och lättare att förstå. Decorators ger ett deklarativt sätt att uttrycka ytterligare beteende, vilket gör koden mer själv-dokumenterande.
• Ökad underhållbarhet: Decorators främjar modularitet och separation av bekymmer, vilket gör det lättare att modifiera eller utöka din applikation utan att påverka andra delar av kodbasen. Detta minskar risken för att införa buggar och förenklar underhållsprocessen.
• Aspect-Oriented Programming (AOP): Decorators gör det möjligt för dig att implementera AOP-principer genom att låta dig injicera beteende i befintlig kod utan att ändra dess källkod. Detta är särskilt användbart för att hantera korsande bekymmer som loggning, säkerhet och transaktionshantering.

Decorator Typer

JavaScript-decorators kan tillämpas på olika typer av deklarationer, var och en med sitt eget specifika syfte och syntax:

Klass Decorators

Klass decorators tillämpas på klasskonstruktorn och kan användas för att modifiera klassdefinitionen eller lägga till metadata. En klass decorator tar emot klasskonstruktorn som sitt enda argument.

Exempel: Lägga till metadata till en klass.

            
function Component(options: { selector: string, template: string }) {
  return function (constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: '
Hello
' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Output: my-component

            

              
                Copy
              
            
          

I detta exempel lägger Component-decoratorn till egenskaperna selector och template till MyComponent-klassen, vilket gör att du kan konfigurera komponentens metadata på ett deklarativt sätt. Detta liknar hur Angular-komponenter definieras.

Metod Decorators

Metod decorators tillämpas på metoder inom en klass och kan användas för att modifiera metodens beteende eller lägga till metadata. En metod decorator tar emot tre argument:

• Målobjektet (antingen klassprototypen eller klasskonstruktorn, beroende på om metoden är statisk).
• Metodens namn.
• Egenskapsbeskrivningen för metoden.

Exempel: Logga metodanrop.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                     //         add returned: 5

            

              
                Copy
              
            
          

I detta exempel loggar Log-decoratorn metodanropet och dess argument innan den ursprungliga metoden körs, och loggar returvärdet efter exekvering. Detta är ett enkelt exempel på hur decorators kan användas för att implementera loggnings- eller granskningsfunktionalitet utan att ändra metodens kärnlogik.

Egenskap Decorators

Egenskap decorators tillämpas på egenskaper inom en klass och kan användas för att modifiera egenskapens beteende eller lägga till metadata. En egenskap decorator tar emot två argument:

• Målobjektet (antingen klassprototypen eller klasskonstruktorn, beroende på om egenskapen är statisk).
• Egenskapens namn.

Exempel: Validera egenskapsvärden.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Invalid value for ${propertyKey}. Must be a non-negative number.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Output: 10

try {
  product.price = -5; // Kastar ett fel
} catch (e) {
  console.error(e.message);
}

            

              
                Copy
              
            
          

I detta exempel validerar Validate-decoratorn price-egenskapen för att säkerställa att det är ett icke-negativt tal. Om ett ogiltigt värde tilldelas kastas ett fel. Detta är ett enkelt exempel på hur decorators kan användas för att implementera datavalidering.

Parameter Decorators

Parameter decorators tillämpas på parametrar till en metod och kan användas för att lägga till metadata eller modifiera parameterens beteende. En parameter decorator tar emot tre argument:

• Målobjektet (antingen klassprototypen eller klasskonstruktorn, beroende på om metoden är statisk).
• Metodens namn.
• Parameterns index i metodens parameterlista.

Exempel: Injicera beroenden.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hello, ${name}!`);
    }
}

// Enkel beroendeinjektionsbehållare
class Container {
    private dependencies: Map = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve(Greeter);
greeter.greet('World'); // Output: Logger: Hello, World!

            

              
                Copy
              
            
          

I detta exempel används Inject-decoratorn för att injicera beroenden i konstruktorn för Greeter-klassen. Decoratorn associerar en token med parametern, som sedan kan användas för att lösa beroendet med hjälp av en beroendeinjektionsbehållare. Detta exempel visar en grundläggande implementering av beroendeinjektion med hjälp av decorators och reflect-metadata-biblioteket.

Praktiska Exempel och Användningsfall

JavaScript-decorators kan användas i en mängd olika scenarier för att förbättra kodkvaliteten och förenkla utvecklingen. Här är några praktiska exempel och användningsfall:

Loggning och Granskning

Decorators kan användas för att automatiskt logga metodanrop, argument och returvärden, vilket ger värdefulla insikter i applikationens beteende och prestanda. Detta kan vara särskilt användbart för felsökning och problemlösning.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] Method ${propertyKey} returned: ${result}. Execution time: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simulera en tidskrävande operation
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

            

              
                Copy
              
            
          

Detta utökade exempel mäter metodens exekveringstid och loggar den, tillsammans med aktuell tidsstämpel, vilket ger mer detaljerad information för prestandaanalys.

Auktorisering och Autentisering

Decorators kan användas för att upprätthålla säkerhetspolicyer genom att kontrollera användarroller och behörigheter innan en metod körs. Detta kan förhindra obehörig åtkomst till känslig data och funktionalitet.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Funktion för att hämta aktuell användares roll

            if (userRole !== role) {
                throw new Error(`Unauthorized: User does not have the required role (${role}) to access this method.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // I en verklig applikation skulle detta hämta användarens roll från autentiseringskontexten
    return 'admin'; // Exempel: Hårdkodad roll för demonstration
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted successfully.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Article ${articleId} edited successfully.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // Detta kommer att kasta ett fel eftersom användarrollen är 'admin'
} catch (error) {
    console.error(error.message);
}

            

              
                Copy
              
            
          

I detta utökade exempel kontrollerar Authorize-decoratorn om den aktuella användaren har den specificerade rollen innan åtkomst till metoden tillåts. getCurrentUserRole-funktionen (som skulle hämta den faktiska användarrollen i en verklig applikation) används för att bestämma användarens aktuella roll. Om användaren inte har den nödvändiga rollen kastas ett fel, vilket förhindrar att metoden körs.

Cachelagring

Decorators kan användas för att cachelagra resultaten av dyra operationer, vilket förbättrar applikationens prestanda och minskar serverbelastningen. Detta kan vara särskilt användbart för ofta åtkomlig data som inte ändras ofta.

            
function Cache(ttl: number = 60) { // ttl i sekunder, standard 60 sekunder
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Retrieving from cache: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Executing and caching: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Beräkna utgångstid
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Cache i 120 sekunder
    async fetchData(id: number): Promise {
        // Simulera hämtning av data från en databas eller API
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Data for ID ${id} fetched from source.`);
            }, 1000); // Simulera en 1-sekunds fördröjning
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Kör metoden
    console.log(await dataService.fetchData(1)); // Hämtar från cache
    await new Promise(resolve => setTimeout(resolve, 121000)); // Vänta 121 sekunder för att cachen ska gå ut
    console.log(await dataService.fetchData(1)); // Kör metoden igen efter att cachen har gått ut
})();

            

              
                Copy
              
            
          

Detta utökade exempel implementerar en grundläggande cachelagringsmekanism med hjälp av en Map. Cache-decoratorn lagrar resultaten från den dekorerade metoden under en angiven livslängd (TTL). När metoden anropas igen med samma argument, returneras det cachelagrade resultatet istället för att köra om metoden. Efter att TTL har gått ut körs metoden igen och resultatet cachelagras.

Validering

Decorators kan användas för att validera data innan den bearbetas, vilket säkerställer dataintegritet och förhindrar fel. Detta kan vara särskilt användbart för att validera användarinmatning eller data som mottagits från externa källor.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Missing required field: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Valid user created:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Saknar e-post
} catch (error) {
    console.error('Validation error:', error.message);
}


            

              
                Copy
              
            
          

Detta exempel använder två decorators: Required och ValidateClass. Required-decoratorn markerar egenskaper som obligatoriska. ValidateClass-decoratorn avlyssnar klasskonstruktorn och kontrollerar om alla obligatoriska fält har värden. Om något obligatoriskt fält saknas kastas ett fel.

Beroendeinjektion

Som visas i exemplet med parameter decorators kan decorators underlätta grundläggande beroendeinjektion, vilket gör det lättare att hantera beroenden och frikoppla komponenter. Även om det finns mer sofistikerade beroendeinjektionsramverk, kan decorators erbjuda ett lättviktigt och bekvämt sätt att hantera enkla beroendeinjektionsscenarier.

Överväganden och Bästa Praxis

• Förstå exekveringskontexten: Var medveten om argumenten target, propertyKey och descriptor som skickas till decorator-funktionen. Dessa argument ger värdefull information om den dekorerade deklarationen och låter dig modifiera dess beteende därefter.
• Använd decorators sparsamt: Även om decorators kan vara kraftfulla, kan överanvändning leda till komplex och svårförståelig kod. Använd decorators med omdöme och endast när de ger en tydlig fördel i form av kodåteranvändbarhet, läsbarhet eller underhållbarhet.
• Följ namngivningskonventioner: Använd beskrivande namn för dina decorators för att tydligt ange deras syfte. Detta gör din kod mer själv-dokumenterande och lättare att förstå.
• Bibehåll separation av bekymmer: Decorators bör fokusera på specifika korsande bekymmer och undvika att blanda orelaterad funktionalitet. Detta förbättrar modulariteten och underhållbarheten i din kod.
• Testa dina decorators noggrant: Precis som all annan kod bör decorators testas noggrant för att säkerställa att de fungerar korrekt och inte introducerar oavsiktliga sidoeffekter.
• Var medveten om sidoeffekter: Decorators körs vid körning. Undvik komplexa eller tidskrävande operationer inom decorator-funktioner, eftersom detta kan påverka applikationens prestanda.
• TypeScript rekommenderas: Även om JavaScript-decorators tekniskt sett kan användas i ren JavaScript med Babel-transpilering, används de oftast med TypeScript. TypeScript tillhandahåller utmärkt typsäkerhet och kontroll vid design för decorators.

Globala Perspektiv och Exempel

Principerna för kodåteranvändbarhet, underhållbarhet och separation av bekymmer, som decorators underlättar, är universellt tillämpliga inom olika mjukvaruutvecklingskontexter globalt. Specifika implementeringar och användningsfall kan dock variera beroende på teknikstack, projektkrav och utvecklingsmetoder som är vanliga i olika regioner.

Till exempel, inom företags Java-utveckling används annotationer (liknande decorators i konceptet) i stor utsträckning för konfiguration och beroendeinjektion (t.ex. Spring Framework). Även om syntaxen och de underliggande mekanismerna skiljer sig från JavaScript-decorators, förblir de underliggande principerna för metaprogrammering och AOP desamma. Likaså, i Python, är decorators en förstklassig språkfunktion och används ofta för uppgifter som loggning, autentisering och cachelagring.

När man arbetar i internationella team eller bidrar till öppen källkodsprojekt med en global publik, är det viktigt att följa kodstandarder och bästa praxis som främjar klarhet och underhållbarhet. Att använda decorators effektivt kan bidra till en mer modulär och välorganiserad kodbas, vilket gör det lättare för utvecklare från olika bakgrunder att samarbeta och bidra.

Slutsats

JavaScript-decorators är en kraftfull och mångsidig metaprogrammeringsfunktion som avsevärt kan förbättra kodens återanvändbarhet, läsbarhet och underhållbarhet. Genom att tillhandahålla ett deklarativt sätt att lägga till metadata och implementera AOP-principer, gör decorators det möjligt för dig att kapsla in gemensamt beteende, separera bekymmer och skapa mer modulära och välorganiserade applikationer. Även om det fortfarande är ett förslag under aktiv utveckling, har decorators redan funnit bred adoption i ramverk som Angular och NestJS och är på väg att bli en allt viktigare del av JavaScript-ekosystemet. Genom att förstå syntaxen, användningen och bästa praxis för decorators kan du utnyttja deras kraft för att bygga mer robusta, skalbara och underhållbara applikationer.

I takt med att JavaScript-ekosystemet fortsätter att utvecklas är det avgörande att hålla sig uppdaterad om nya funktioner och bästa praxis för att bygga högkvalitativ mjukvara som möter användarnas behov över hela världen. Att bemästra JavaScript-decorators är en värdefull färdighet som kan hjälpa dig att bli en mer effektiv och produktiv utvecklare.